class Carousel {
  constructor(tag) {
    //获取目标元素
    this.tag = document.querySelector(tag);
    this.lBtn = this.tag.querySelector(".l_btn");
    this.rBtn = this.tag.querySelector(".r_btn");
    //获取li列表
    this.list = this.tag.querySelectorAll(".img_box>ul>li");
    //获取所有li要移动的类名
    this.listClassName = ["list01", "list02", "list03", "list04"];
    //触发绑定事件
    this.eventFn();
    //获取小圆点盒子
    this.dotBox = this.tag.querySelector(".dot_box");
    //获取小圆点
    this.dots = this.tag.querySelectorAll(".dot_box > span");
    //获取所有小圆点要移动的类名
    this.dotClassName = ["dot01", "dot02", "dot03", "dot04"];
    //初始化变量
    this.index = 0;
    //获取上一个初始化变量值
    this.lastIndex = 0;


    this.dotFn();

    // //自动轮播
    // setInterval(() => {
    //   //操作数组
    //   //添加数组最后值到第一个值
    //   this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
    //   //删除数字的最后一个值
    //   this.listClassName.pop();

    //   //li全部重新设置类名
    //   this.resetListFn();
    // }, 1000);
  }

  //li全部重新设置类名
  resetListFn() {
    this.list.forEach((item, idx) => {
      item.className = this.listClassName[idx];
    })
  }

  //点击按钮
  eventFn() {
    //右按钮
    this.rBtn.addEventListener("click", () => {
      //操作数组
      //添加数组最后值到第一个值
      this.listClassName.unshift(this.listClassName[this.listClassName.length - 1]);
      //删除数字的最后一个值
      this.listClassName.pop();

      //li全部重新设置类名
      this.resetListFn();

      if (this.index == this.listClassName.length - 1) {
        this.index = 0;
        this.dotBox.children[this.index].className = "dot_active";
        this.dotBox.children[this.lastIndex].className = "";
        this.lastIndex = 0;
      } else {
        this.dotBox.children[this.lastIndex].className = "";
        this.index += 1;
        this.lastIndex = this.index;
        this.dotBox.children[this.index].className = "dot_active";
      }

    })

    //左按钮
    this.lBtn.addEventListener("click", () => {
      //操作数组
      //添加数组第一个值到最后
      this.listClassName.push(this.listClassName[0]);
      //删除数组的第一个值
      this.listClassName.shift();

      //li全部重新设置类名
      this.resetListFn();

      if (this.index == 0) {
        this.index = this.listClassName.length - 1;
        this.dotBox.children[this.index].className = "dot_active";
        this.dotBox.children[this.lastIndex].className = "";
        this.lastIndex = this.listClassName.length - 1;
      } else {
        this.dotBox.children[this.lastIndex].className = "";
        this.index -= 1;
        this.lastIndex = this.index;
        this.dotBox.children[this.index].className = "dot_active";
      }
    })
  }

  //小圆点
  dotFn() {
    this.dots.forEach((item, index) => {
      item.addEventListener("click", () => {
        this.dotBox.children[this.lastIndex].className = "";
        this.lastIndex = index;
        item.className = "dot_active";

      })
    })
  }
}



